<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>商品详情</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
          <img src="images/mac.jpeg" class="img-responsive"/>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-8 col-lg-8">
          <h4>苹果Macbook Pro2018款</h4>
          <p><small><a href="#">猛戳领券优惠200元</a></small></p>
          <div>
            <p><del>原价：￥12999.00</del>&nbsp;&nbsp;现价：<strong>￥9999.00</strong></p>
            <p>库存：<strong>200</strong></p>
            <p>月销量：<strong>500</strong></p>
            <p>评价数：<strong>5000</strong></p>
            <p>
              <a class="btn btn-primary" href="#">加入购物车</a>
              <a class="btn btn-danger" href="#">立即购买</a>
            </p>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-12">
          <h4>商品详情</h4>
          <p class="lead text-primary">全网最值得购买的Macbook Pro</p>
          <p>
            其他商品描述……
          </p>
          <table class="table table-striped table-hover">
            <caption>详细配置</caption>
            <tbody>
              <tr class="success">
                <th>编号</th>
                <th>名称</th>
                <th>详情</th>
              </tr>
              <tr>
                <td>1</td>
                <td>CPU</td>
                <td>Intel Core i7</td>
              </tr>
              <tr>
                <td>2</td>
                <td>内存</td>
                <td>8GB DDR5内存</td>
              </tr>
              <tr>
                <td>3</td>
                <td>硬盘</td>
                <td>250GB SSD固态硬盘</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-12">
          <h4>我要评价</h4>
          <form>
            <div class="form-group">
              <label for="title">标题</label>
              <input type="text" class="form-control" id="title" placeholder="请输入标题">
            </div>
            <div class="form-group">
              <label for="comment">评价内容</label>
              <textarea id="comment" class="form-control" rows="3" placeholder="请输入评价内容，不少于10个字"></textarea>
            </div>

            <div class="form-group">
              <label for="pic">晒图片</label>
              <input type="file" id="pic">
              <p class="help-block">请选择你要分享的照片</p>
            </div>
            <div class="checkbox">
              <label>
                <input type="checkbox"> 匿名评价
              </label>
            </div>
            <button type="submit" class="btn btn-default">提交评价</button>
          </form>
        </div>
      </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>
